<template>
  <div class="app">

    <div style="width: 70%;" v-if="show">
      <van-field v-model="loginUsername" placeholder="请输入用户名" />
      <van-field
        v-model="loginPassword"
        type="password"
        placeholder="请输入密码"
      />

      <span class="tiaozhuan" @click="show = false">没有账号? 注册</span>
      <van-button class="btn" type="info" @click="denlu">登录</van-button>
    </div>

    <div style="width: 70%;dispaly: flex;justify-content: flex-end;" v-if="!show">
      <van-field v-model="registerUsername" placeholder="请输入用户名" />
      <van-field
        v-model="registerPassword"
        type="password"
        placeholder="请输入密码"
      />

      <span class="tiaozhuan" @click="show = true">已有账号? 登录</span>
      <van-button class="btn" type="info" @click="zhuche">注册账号</van-button>
    </div>

  </div>
</template>

<script>
import { postlogin,postregister } from "@/api/login.js";

export default {
  data() {
    return {
      show:true,
      loginUsername: "",
      loginPassword: "",
      registerUsername: '',
      registerPassword: '',
    };
  },
  methods: {
    async denlu() {
      var { data } = await postlogin(this.loginUsername, this.loginPassword);

      if (data.status == 0) {
        localStorage.setItem("token", data.token);
        this.$toast("登录成功")
          setTimeout(() => {
            // 刷新页面
             this.$router.go(-1);
          }, 800);
        
      }
    },
    async zhuche() {
      var { data } = await postregister(this.registerUsername, this.registerPassword);
      console.log(data);
      if (data.status == 0) {
        this.$toast("注册成功")
          setTimeout(() => {
            // 刷新页面
             location.reload()
          }, 800);
        
      }
    },
    
  },
};
</script>

<style lang="scss" scoped>
.app {
  width: 100%;
  margin: 100px auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.tiaozhuan {
  font-size: 16px;
  margin: 8px 6px;
  cursor: pointer;
}

.btn {
  width: 100%;
}
</style>